<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import {
    useRoute
  } from 'vue-router'
  import {
    getOfferingListApi,
    getOfferingListUserApi,
  } from "@/assets/api/other/memorialHall.js"
  import {
    navigateBack
  } from "@/assets/scripts/navigate.js"

  import record from '@/components/record.vue'

  const meMemorialId = ref("")
  const isUser = ref(false)
  const lightingList = ref([])
  const pageNum = ref(1)
  const total = ref(10)
  const loading = ref(true)

  onMounted(() => {
    route_init() // 路由参数
    lightingList_init() // 请求记录数据
  })

  const handleMore = () => {
    if (loading.value) return
    loading.value = true
    pageNum.value = pageNum.value + 1
    lightingList_init() // 请求记录数据
  }

  const route_init = async () => {
    const route = useRoute()
    if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
      meMemorialId.value = route.query.meMemorialId
    }
    if (route.query.isUser && route.query.isUser !== 'undefined') {
      isUser.value = route.query.isUser
    }
  }

  const lightingList_init = async () => {
    const res = isUser.value ? await getOfferingListUserApi(meMemorialId.value, '点灯', '') :
      await getOfferingListApi(
        meMemorialId.value, '点灯', '')
    if (res.code === 200) {
      total.value = res.total
      const rows = res.total <= (pageNum.value - 1) * 10 ? [] : res.rows
      lightingList.value = [...lightingList.value.slice(0, (pageNum.value - 1) * 10), ...rows]
      loading.value = false
    }
  }
</script>

<template>
  <view class="">
    <uv-navbar :fixed="false" bgColor="#f8f8f8" @leftClick="navigateBack" title="点灯记录">
    </uv-navbar>
    <view class="mt-normal px-normal">
      点灯记录[{{total}}]
    </view>
    <view class="mt-normal px-normal" v-for="(item, index) in lightingList" :key="index">
      <record :data="item"></record>
    </view>
    <uv-button class="mb-normal" style="width: 100%;" v-if="!loading && total > pageNum * 10" type="success" text="查看更多"
      @click="handleMore"></uv-button>
  </view>
</template>

<style lang="scss" scoped>
</style>